<template>
  <div class="app-container">
    <div style="width:100%;margin-bottom:21px;">
      <el-input v-model="name" clearable placeholder="请输入名称" style="width:15%;" @keyup.enter.native="handleFilter"/>
      <el-button type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
      <el-button size="medium" type="info" @click="clearParams">清空</el-button>
      <el-button type="primary" style="float:right;" @click="addCategory()">添加分类</el-button>
    </div>
    <tree-table :data="data" :eval-func="func" :eval-args="args" :expand-all="expandAll" border>
      <el-table-column label="名称" min-width="60">
        <template slot-scope="scope">
          <span style="color:sandybrown">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="40" align="center">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" @click="handleClickEdit(scope.row)">编辑</el-button>
          <el-button type="success" icon="el-icon-plus" @click="addChildren(scope.row)">添加子分类</el-button>
        </template>
      </el-table-column>
    </tree-table>
    <tree-dialog
      :dialog-visible="dialogVisible"
      :newform="form"
      @submit="handleClickSubmit"
      @deleteCategory="deleteCategory"
      @cancel="cancelDialog"
    />
  </div>
</template>

<script>
  /**
   Auth: Lei.j1ang
   Created: 2018/1/19-14:54
   */
  import treeTable from '@/components/TreeTable'
  import treeToArray from './customEval'
  import TreeDialog from './dialog'
  import {getTenantId} from '@/utils/auth'
  import {addCategory, deleteCategory, getCategoryList, updateCategory} from '@/api/subject/category' // 接口
  export default {
    name: 'CustomTreeTableDemo',
    components: {treeTable, TreeDialog},
    data() {
      return {
        form: {},
        dialogVisible: false,
        switchValue: false,
        func: treeToArray,
        expandAll: false,
        data: [],
        filterData: [],
        args: [null, null, 'code'],
        name: ''
      }
    },
    mounted() {
      this.getData()
    },
    methods: {
      addCategory() {
        this.dialogVisible = true;
        this.form = {};
        this.form.parentId = 0;
      },
      handleClickSubmit(form) {
        if (form.id) {
          updateCategory(form).then(() => {
            this.$notify({
              title: '成功',
              message: '成功修改班级分类！',
              type: 'success',
              duration: 2000
            });
            this.getData()
          })
        } else {
          form.type = 'class';
          form.tenantId = getTenantId();
          addCategory(form).then(res => {
            this.$notify({
              title: '成功',
              message: '成功创建班级分类！',
              type: 'success',
              duration: 2000
            });
            this.getData()
          })
        }
        this.dialogVisible = false
      },
      handleClickEdit(row) {
        delete row.parent;
        delete row.children;
        this.form = Object.assign({}, row);
        this.form.hasDelete = true;
        this.dialogVisible = true
      },
      addChildren(row) {
        this.form = {};
        this.dialogVisible = true;
        this.form.parentId = row.id
      },
      deleteCategory(form) {
        deleteCategory(form.id).then(res => {
          this.$notify({
            title: '成功',
            message: '成功删除课程分类！',
            type: 'success',
            duration: 2000
          });
          this.getData()
        }).catch(() => {
          this.$message.error('删除失败，请联系管理员！')
        });
        this.dialogVisible = false
      },
      change() {
        if (!this.expandAll) {
          this.expandAll = true
        } else {
          this.expandAll = false
        }
      },
      getData() {
        getCategoryList('class', getTenantId(), '0').then(response => {
          this.data = response.data.items;
          this.filterData = response.data.items
        })
      },
      handleFilter() {
        this.data = this.filterData.filter(item => {
          if (this.name && item.label.toLocaleLowerCase().indexOf(this.name.toLocaleLowerCase()) < 0) return false;
          return true
        })
      },
      clearParams() {
        this.name = '';
        this.getData()
      },
      cancelDialog() {
        this.dialogVisible = false;
        this.form = {}
      },
    }
  }
</script>

<style lang="scss">
  .app-container {
    padding: 0;

    .classify-switch-label {
      margin-left: 20px;

      .el-switch__label {
        height: 36px;
        padding: 8px 20px;
        background-color: rgba(133, 207, 236, 0.452);
        border-radius: 3px;
        color: #409eff;
      }
    }
  }
</style>
